<template>
    <div class="confirm">
        <div class="base_header">
            <img src="../../assets/img/back.png" alt="" @click="goBack">选择支付
        </div>
        <div class="pay_type">
            <div class="border">支付方式</div>
            <div class="border" @click="choose_ali()">
                <img class="radio" v-if="!pay_type.alipay" src="../../assets/img/order/radio.png" alt="">
                <img class="radio" v-if="pay_type.alipay" src="../../assets/img/order/radio_active.png" alt="">
                <img class="icon" src="../../assets/img/order/alpay.png" alt="">
                支付宝支付
            </div>
            <div class="border" @click="choose_wx()">
                <img class="radio" v-if="!pay_type.wx" src="../../assets/img/order/radio.png" alt="">
                <img class="radio" v-if="pay_type.wx" src="../../assets/img/order/radio_active.png" alt="">
                <img class="icon" src="../../assets/img/order/weixin.png" alt="">
                微信支付
            </div>
        </div>
        <div class="order_bts">
            <span class="total">合计：<span class="blue f14">￥{{payOrder.payAmount}}</span></span><span
                class="sub" @click="toPay()">提交订单</span>
        </div>
    </div>

</template>


<style>
    @import url("./confirm.css");
</style>
<script>
    import Layer from '../../assets/js/MessageBox'
    import API from '../../assets/js/API'
    import Validate from '../../assets/js/Validate'

    export default {
        data() {
            return {
                pay_type: {
                    wx: false,
                    alipay: true,
                },
                payOrder: this.$route.query.payOrder,
                imageDomain: "",
                orderReq: {payOrderCode: "", payType: ""},
                channelObj: {},
            }
        },
        created() {
            document.addEventListener('plusready', this.plusReady(), false);
        },
        mounted() {
            this.imageDomain = API.imageDomain;
            let token = localStorage.getItem('token');
            if (!token) {
                Layer.showMsg("您还未登录!");
                this.$router.push({path: '/login'});
            }
        },
        methods: {
            goBack() {
                this.$router.goBack()
            },
            choose_wx() {
                this.pay_type.wx = true;
                this.pay_type.alipay = false;
            },
            choose_ali() {
                this.pay_type.wx = false;
                this.pay_type.alipay = true;
            },
            toPay() {
                let url = API.serviceDomain + API.orderPay;
                this.orderReq.payOrderCode = this.payOrder.payOrderCode;
                let channel;
                if (this.pay_type.wx) {
                    channel = this.channelObj['wxpay'];
                    this.orderReq.payType = "2";
                }
                if (this.pay_type.alipay) {
                    channel = this.channelObj['alipay'];
                    this.orderReq.payType = "1";
                }
                let _this = this;
                let waiting = plus.nativeUI.showWaiting();
                this.$http.post(url, this.orderReq).then(
                    (res) => {
                        waiting.close();
                        waiting = null;
                        if (res.body.status == '000000') {
                            plus.payment.request(channel, res.body.data, function (result) {
                                plus.nativeUI.alert("支付成功！", function () {
                                    _this.$router.push({path: 'order', query: {orderType: ''}})
                                });
                            }, function (error) {
                                let msg = '';
                                switch (error.code) {
                                    case 62000:
                                        msg = '客户端未安装支付通道依赖的服务';
                                        break;
                                    case 62001:
                                        msg = '用户取消支付操作';
                                        break;
                                    case 62002:
                                        msg = '此设备不支持支付';
                                        break;
                                    case 62003:
                                        msg = '数据格式错误';
                                        break;
                                    case 62004:
                                        msg = '支付账号状态错误';
                                        break;
                                    case 62005:
                                        msg = '订单信息错误';
                                        break;
                                    case 62006:
                                        msg = '支付操作内部错误';
                                        break;
                                    case 62007:
                                        msg = '支付服务器错误';
                                        break;
                                    case 62008:
                                        msg = '网络问题引起的错误';
                                        break;
                                    default:
                                        msg = '买方取消支付';
                                        break;
                                }
                                plus.nativeUI.alert(msg);
                            });
                        } else {
                            Layer.showMsg(res.body.message)
                            return;
                        }
                    },
                    (error) => {
                        Layer.showMsg("服务器开小差了...")
                        return
                    }
                )
            },
            plusReady() {
                let _this = this;
                plus.payment.getChannels(function (channels) {
                    for (var i in channels) {
                        var channel = channels[i];
                        _this.channelObj[channel.id] = channel;
                        _this.checkPayService(channel);
                    }

                }, function (e) {
                    console.log('获取支付通道失败：' + e.message);
                });
            },
            checkPayService(channel) {
                if (!channel.serviceReady) {
                    var txt = null;
                    switch (channel.id) {
                        case 'alipay':
                            txt = '检测到系统未安装“支付宝快捷支付服务”，无法完成支付操作，是否立即安装？';
                            break;
                        default:
                            txt = '系统未安装“' + channel.description + '”服务，无法完成支付，是否立即安装？';
                            break;
                    }
                    plus.nativeUI.confirm(txt, function (e) {
                        if (e.index == 0) {
                            channel.installService();
                        }
                    }, channel.description);
                }
            }
        }
    }
</script>